<template>
  <div>
    <Header></Header>
    <div style="background: #eee;">
      <!-- 面包屑导航 -->
      <div class="nav-wrap">
        <p class="nav-p-pc" style="margin-top:-25px;text-align:left;">
          <a href="/">课程列表</a>
          <span class="sharp-content">&gt;</span>
          <span class="nav-sec">{{ course.courseName }}</span>
        </p>
      </div>

      <!-- 课程详情 -->
      <div class="container">
        <div style="height: 100%;">
          <div class="weui-tab content-wrapper">
            <div id="vux_view_box_body" class="weui-tab__panel vux-fix-safari-overflow-scrolling">
              <div style="position: relative;">
                <div class="intro">
                  <div class="intro-content">
                    <img class="course-img" :src="course.courseImgUrl" alt="课程图片" />
                    <div class="conent-wrap">
                      <div class="name" style="text-align:left;">
                        {{ course.courseName }}
                      </div>
                      <div class="des text-omit" style="text-align:left;">
                        {{ course.brief }}
                      </div>
                      <div class="title">
                        <div class="teacher-name text-omit">
                          讲师：{{ course.teacher.teacherName }}
                          <span class="line"></span>
                          {{ course.teacher.position }}
                        </div>
                      </div>
                      <div class="lesson-info">
                        <div class="boook-icon backgroun-img-set"></div>
                        <div class="time">{{ totalLessons }} 讲 / {{ course.totalDuration }} 课时</div>
                        <div class="person-icon backgroun-img-set"></div>
                        <div class="person">{{ course.sales }}人已购买</div>
                      </div>
                    </div>

                    <div class="content-right">

                      <div class="button-wrap" @click="watchFirstCourse()">
                        免费试看
                        <div class="small-arrows"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="public-class-container is-pc">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="课程信息" name="intro">
                    <div v-html="course.courseDescription" class="content-p pc-background">
                    </div>

                    <!-- 留言板 开始-->
                    <div class="message">
                      <div class="message-topic">
                        <div class="message-topic-title normal-font">精选留言</div>
                      </div>
                      <div>
                        <div class="message-edit">
                          <textarea rows="20" style="border:none;resize: none;" contenteditable="true"
                            placeholder="分享学习心得、思考感悟或者给自己一个小鼓励吧！" class="edit-div pcStyle" v-model="comment"></textarea>
                        </div>
                        <div class="message-edit-footer flex">
                          <button class="message-edit-btn disableBg">发表留言</button>
                        </div>
                      </div>


                      <!-- 留言 开始 -->
                      <div class="message-list" v-for="(comment, index) in commentList" :key="index">
                        <div class="message-list-title">
                          <div class="message-list-title-left">
                            <div class="message-list-title-left-name">{{ comment.userName }}</div>
                            <div class="message-list-title-left-tag"></div>
                          </div>
                          <!-- 已赞  -->
                          <div @click="cancelzan(comment)"
                            v-if="JSON.stringify(comment.favoriteRecords).indexOf(user.content.id) >= 0"
                            class="message-list-title-right">
                            <img class="message-list-title-right-icon"
                              src=""
                              alt="">
                            <div class="message-list-title-right-praise">{{ comment.likeCount }}</div>
                          </div>
                          <!-- 没点过赞 -->
                          <div @click="zan(comment)" v-else class="message-list-title-right">
                            <img class="message-list-title-right-icon"
                              src=""
                              alt="">
                            <div class="message-list-title-right-praise">{{ comment.likeCount }}</div>
                          </div>
                        </div>
                        <div class="message-list-content">
                          {{ comment.comment }}
                        </div>
                        <!--删除留言（必须登录才能删除自己的）-->
                        <!--
                        <div class="message-delete pointer">
                          <img class="message-delete-icon" src="" alt="">删除
                        </div>
                        -->
                      </div>
                      <!-- 留言 结束 -->

                    </div>
                    <!-- 留言板 结束-->

                  </el-tab-pane>
                  <el-tab-pane label="目录" name="directory">
                    <div class="class-menu-contaniner list-page-container more-sections more-sections-padding">
                      <!-- 第一章 开始 -->
                      <div v-for="section in course.courseSections.slice(0, 1)" :key="'first-' + section.id">
                        <div class="section-name single-line">
                          {{ section.sectionName }}
                        </div>
                        <div class="class-menu-block">
                          <!-- 每节课 开始 -->
                          <div class="class-level-one over-ellipsis"
                            @click="watchCourse(1, lesson.id, index, lesson.courseMedia)"
                            v-for="(lesson, index) in section.courseLessons" :key="index">
                            <div class="text-wrap">
                              <div class="content">{{ lesson.theme }}</div>
                              <div class="item-status-wrap item-status-wrap-list">
                                <!-- 第一章，前两节 -->
                                <div v-if="index < 2">
                                  <!-- 未登录 => 试看 -->
                                  <div v-if="!isLogin" class="item-status test-watch">试看</div>
                                  <!-- 已登录，未购买 => 试看 -->
                                  <div v-else-if="isLogin && !isBuy" class="item-status test-watch">试看</div>
                                  <!-- 已登录，已购买 => 播放 -->
                                  <div v-else class="item-status test-watch">播放</div>
                                </div>

                                <!-- 第一章，除了前两节的 -->
                                <div v-if="index > 1">
                                  <!-- 未登录 => 锁 -->
                                  <div v-if="!isLogin" class="item-status lock"></div>
                                  <!-- 已登录，未购买 => 锁 -->
                                  <div v-else-if="isLogin && !isBuy" class="item-status lock"></div>
                                  <!-- 已登录，已购买 => 播放 -->
                                  <div v-else class="item-status test-watch">播放</div>
                                </div>

                              </div>
                            </div>
                          </div>
                          <!-- 每节课 结束 -->
                        </div>
                      </div>
                      <!-- 第一章 结束 -->

                      <!-- 其余章 开始 -->
                      <div v-for="section in course.courseSections.slice(1, course.courseSections.length)"
                        :key="section.id">
                        <div class="section-name single-line">
                          {{ section.sectionName }}
                        </div>
                        <div class="class-menu-block">
                          <!-- 每节课 开始 -->
                          <div class="class-level-one over-ellipsis"
                            @click="watchCourse(2, lesson.id, index, lesson.courseMedia)"
                            v-for="(lesson, index) in section.courseLessons" :key="index">
                            <div class="text-wrap">
                              <div class="content">{{ lesson.theme }}</div>
                              <div class="item-status-wrap item-status-wrap-list">
                                <!-- 未登录 => 锁 -->
                                <div v-if="!isLogin" class="item-status lock"></div>
                                <!-- 已登录，未购买 => 锁 -->
                                <div v-else-if="isLogin && !isBuy" class="item-status lock"></div>
                                <!-- 已登录，已购买 => 播放 -->
                                <div v-else class="item-status test-watch">播放</div>
                              </div>
                            </div>
                          </div>
                          <!-- 每节课 结束 -->
                        </div>
                      </div>
                      <!-- 其余章 结束 -->
                    </div>
                  </el-tab-pane>
                </el-tabs>

                <div class="tab-fix-wrap"></div>
                <div></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 微信支付二维码-->
        <el-dialog :visible.sync="dialogFormVisible" :modal="true" :close-on-click-modal="false"
          style="width:800px;margin:0px auto;">
          <h1 style="font-size:30px;color:#00B38A">微信扫一扫支付</h1>
          <div class="qrcode-container" style="text-align: center; padding: 20px;">
            <img src="/images/wxpay.png" alt="微信支付" style="width: 200px; height: 200px;">
          </div>
          <h2 id="statusText"></h2>
          <p id="closeText"></p>
        </el-dialog>

        <!-- 底部购买 -->
        <div class="public-class-footer" slot="bottom" style="border:1px solid #eee; height:60px; text-align:left;">
          <span class="product-descript" style="font-size:.347rem">成就自己</span>
          <span class="current-price" style="font-size:28px">
            <span class="current-price-unite" style="font-size:.347rem">
              ￥</span>{{ course.discounts }}
          </span>
          <span class="current-price price">
            <span class="current-price-unite">￥</span>
            {{ course.price }}
          </span>
          <button @click="buy()" type="button" class="weui-btn purchase-button weui-btn_mini weui-btn_primary"
            style="width:155px;height:45px;font-size:17px;">
            立即购买
            <!-- ::after -->
          </button>
        </div>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条

export default {
  name: "Course",
  components: {
    Header,
    Footer
  },
  data() {
    return {
      activeName: "intro",
      course: null,
      totalLessons: 0, // 本门课程的总节数
      commentList: null,  // 所有留言
      isLogin: false, // false 未登录
      isBuy: false, // false 未购买
      user: null, // 当前用户
      myCourseIds: [], // 当前用户购买过的所有课程
      comment: null, // 待发表的留言内容
      dialogFormVisible: false, //默认false：隐藏，true：显示
      time: null,// 计时对象
      orderNo: "",// 订单编号
      firstLessonid: '',
      firstLessonmedia: ''
    };
  },
  async created() {
    try {
      // 从路由参数获取课程信息
      if (this.$route.params.course) {
        this.course = this.$route.params.course;
      }

      // 检查登录状态
      const userStr = localStorage.getItem("user");
      if (userStr) {
        try {
          this.user = JSON.parse(userStr);
          this.isLogin = true;
        } catch (e) {
          console.warn('Failed to parse user data:', e);
        }
      }

      // 计算课程总数
      if (this.course && this.course.courseSections) {
        let total = 0;
        this.course.courseSections.forEach((section, index) => {
          if (index === 0 && section.courseLessons && section.courseLessons.length > 0) {
            this.firstLessonid = section.courseLessons[0].id;
            this.firstLessonmedia = section.courseLessons[0].courseMedia;
          }
          if (section.courseLessons) {
            total += section.courseLessons.length;
          }
        });
        this.totalLessons = total;
      }
    } catch (error) {
      console.warn('Error in created hook:', error);
    }
  },
  methods: {
    watchCourse(status, lessonid, index, media) {
      try {
        if (!media) {
          this.$message.error("播放失败，暂无视频！");
          return;
        }

        if (status === 1 && index < 2) {
          this.$router.push({
            name: "videoDetail",
            params: {
              course: this.course,
              lessonid: lessonid,
              isBuy: this.isBuy
            }
          });
        } else {
          if (!this.isLogin) {
            this.$message.error("请先登录！");
          } else if (!this.isBuy) {
            this.$message.warning("请购买并解锁，才能观看本视频！");
          } else {
            this.$router.push({
              name: "videoDetail",
              params: {
                course: this.course,
                lessonid: lessonid,
                isBuy: this.isBuy
              }
            });
          }
        }
      } catch (error) {
        console.warn('Error in watchCourse:', error);
      }
    },
    buy() {
      this.dialogFormVisible = true;
      setTimeout(() => {
        this.$message.success('购买成功');
        this.dialogFormVisible = false;
      }, 2000);
    },
    watchFirstCourse() {
      if (this.firstLessonid && this.firstLessonmedia) {
        this.$router.push({
          name: "videoDetail",
          params: {
            course: this.course,
            lessonid: this.firstLessonid,
            isBuy: this.isBuy
          }
        });
      } else {
        this.$message.error("暂无可播放的视频！");
      }
    }
  },
};
</script>

<style scoped>
.message-edit-emojilist {
  position: absolute;
  top: 30px;
  left: 0;
  width: 415px;
  height: 180px;
  padding: 18px 10px;
  border: 1px solid #e2ebe8;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 5px;
  z-index: 9;
  margin-bottom: 1.067rem;
}

.message-edit-emoji {
  font-size: 14px;
  color: #666;
}

.message-edit-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: 20px;
  position: relative;
}

.message-edit-count-cur {
  margin-right: -5px;
}

.message-edit-count {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 14px;
  text-align: right;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  color: #ccc;
}

.pcStyle {
  box-sizing: border-box;
  position: relative;
  line-height: 30px;
  margin-top: 6px;
  height: 100%;
}

.edit-div {
  width: 100%;
  line-height: 1.267rem;
  margin-top: 0.267rem;
  word-break: break-all;
  outline: none;
  color: #666;
  -webkit-user-select: text;
  user-select: text;
  text-align: left;
  font-size: 0.427rem;
  caret-color: #00b38a;
  border-bottom: 4px solid #fff;
  overflow: hidden;
  overflow-y: auto;
}

.message-edit {
  font-size: 16px;
  position: relative;
  padding: 0 14px 34px;
  height: 190px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 10px;
}

.message-topic {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.message-topic .normal-font {
  font-weight: 400;
}

* {
  margin: 0;
  padding: 0;
}

div {
  display: block;
}

.nav-wrap {
  padding-top: 40px;
  height: 50px;
  background: #fff;
}

.nav-p-pc {
  font-size: 16px;
  margin: 17px auto;
  vertical-align: top;
  width: 750px;
}

.nav-p-pc a:active,
.nav-p-pc a:link,
.nav-p-pc a:visited {
  color: #666;
}

.nav-p-pc .sharp-content {
  color: #666;
  margin-left: 5px;
}

.nav-p-pc .nav-sec {
  margin-left: 5px;
  color: #999;
}

.container {
  width: 750px;
  margin: 0 auto;
}

.intro-content {
  overflow: hidden;
  padding: 30px;
  position: relative;
  min-height: 133px;
}

.intro {
  background: #5b5d6e;
  font-family: PingFangSC-Regular;
}

.weui-tab__panel {
  box-sizing: border-box;
  height: 100%;
  padding-bottom: 1.333rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.content-wrapper {
  box-sizing: border-box;
  min-height: 100%;
}

.weui-tab {
  position: relative;
  height: 100%;
}

.conent-wrap {
  float: left;
  max-width: 450px;
  position: relative;
}

.name {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 53px;
}

.text-omit {
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.des {
  font-size: 14px;
  color: #fff;
  position: absolute;
  width: 450px;
  top: 36px;
  left: 0;
}

.title {
  font-size: 12px;
  line-height: 12px;
  color: #fff;
  overflow: hidden;
  margin-bottom: 13px;
  font-weight: 400;
  font-family: PingFangSC-Regular;
}

.teacher-name {
  float: left;
}

.line {
  width: 1px;
  height: 8px;
  opacity: 0.5;
  display: inline-block;
  background: #fff;
  margin-left: 10px;
  margin-right: 10px;
}

.lesson-info {
  overflow: hidden;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  font-weight: 400;
}

.boook-icon[data-v-dd02a830] {
  width: 18px;
  height: 18px;
  background-image: url(…gip3QVDYmQv3MNonYRxetQvIHgUR3EkqN76xV++qd/7MATlNn5zIhsuCEAAAAASUVORK5CYII=);
  float: left;
}

.backgroun-img-set {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.time {
  margin-left: 8px;
  float: left;
}

.person-icon {
  width: 18px;
  height: 18px;
  background-image: url(…JiFjKvv30ew3xoAZneN6xkDKPekFmAr5bL5fWApqD/vx34B1s5dQzzKE5bAAAAAElFTkSuQmCC);
  margin-left: 30px;
  float: left;
}

.backgroun-img-set {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.person {
  margin-left: 4px;
  float: left;
}

.content-right {
  position: absolute;
  top: 118px;
  right: 40px;
}

.button-wrap {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #fff;
  height: 34px;
  padding: 0 22px;
  border: 1px solid hsla(0, 0%, 88%, 0.5);
  border-radius: 2px;
  line-height: 34px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  float: right;
}

.small-arrows {
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(…Myh+5soGuoF47UNoy6yQboOuombFBkAQ2lXtaje+zT1EIAsuukPgcISt4AAAAASUVORK5CYII=);
  top: 12px;
  right: 12px;
  position: absolute;
}

.pc-background,
.public-class-container {
  background: #fff;
  min-height: calc(100vh - 4.4rem);
  content: "viewport-units-buggyfill; min-height: calc(100vh - 4.4rem)";
}

.course-img {
  width: 102px;
  max-height: 133px;
  overflow: hidden;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  float: left;
  margin-right: 20px;
}

img {
  border: 0;
  vertical-align: top;
  display: inline-block;
}

.content-p {
  font-size: 0.873rem;
  color: #666;
  letter-spacing: 0;
  text-align: justify;
  line-height: 1.1rem;
}

.pc-background,
.public-class-container {
  background: #fff;
  min-height: calc(100vh - 4.4rem);
  content: "viewport-units-buggyfill; min-height: calc(100vh - 4.4rem)";
}

.pc-background {
  padding: 20px;
}

.public-class-footer {
  height: 1.733rem;
  width: 100%;
  line-height: 55px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 0.4rem;
  border-top: 1px solid #eee;
  background: #fff;
  box-sizing: border-box;
  max-width: 750px;
  margin: 0 auto;
}

.public-class-footer {
  position: fixed;
}

.public-class-footer .product-descript {
  font-size: 0.347rem;
  color: #333;
}

.public-class-footer .current-price {
  font-size: 0.533rem;
  color: #ff7452;
}

.public-class-footer .current-price.price {
  color: #999;
  text-decoration: line-through;
  padding-left: 0.027rem;
  font-size: 0.16rem;
}

.public-class-footer .current-price {
  font-size: 0.533rem;
  color: #ff7452;
}

.public-class-footer .purchase-button {
  width: 4.8rem;
  height: 1.2rem;
  text-align: center;
  display: inline-block;
  font-size: 0.427rem;
  color: #fff;
  border: none;
  position: absolute;
  right: 0.267rem;
  top: 0.267rem;
  cursor: pointer;
}

.public-class-footer .current-price-unite {
  font-size: 0.347rem;
  margin-right: -0.133rem;
}

button {
  -webkit-appearance: button;
  text-rendering: auto;
  color: buttontext;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  background-color: buttonface;
  box-sizing: border-box;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  padding: 0;
  border: 1px solid #ededed;
  border-radius: 0;
  font-family: Hiragino Sans GB, Microsoft Yahei, SimSun, Arial, Helvetica Neue,
    Helvetica;
}

.weui-btn {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.373rem;
  padding-right: 0.373rem;
  box-sizing: border-box;
  font-size: 0.48rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  line-height: 2.33333333;
  border-radius: 4px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

.weui-btn_primary {
  background-color: #00b38a;
}

.weui-btn_mini {
  display: inline-block;
  padding: 0 1.32em;
  line-height: 2.3;
  font-size: 0.347rem;
}

button.weui-btn,
input.weui-btn {
  width: 100%;
  border-width: 0;
  outline: 0;
  -webkit-appearance: none;
}

.public-class-footer .purchase-button {
  width: 4.8rem;
  height: 1.2rem;
  text-align: center;
  display: inline-block;
  font-size: 0.427rem;
  color: #fff;
  border: none;
  position: absolute;
  right: 0.267rem;
  top: 0.267rem;
  cursor: pointer;
}

.class-menu-contaniner.more-sections-padding {
  padding-bottom: 3.04rem;
}

.class-menu-contaniner.more-sections {
  padding: 0 20px 50px 30px;
}

.class-menu-contaniner.list-page-container {
  padding: 20px 15px;
  background: #fff;
}

.class-menu-contaniner {
  background: #f6f6f6;
}

div {
  box-sizing: border-box;
}

.section-name {
  font-size: 18px;
  color: #333;
  font-weight: 700;
  padding: 30px 0 20px;
  max-width: 540px;
  font-family: PingFangSC-Regular;
}

.single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0px;
  text-align: left;
  line-height: 18px;
}

.class-menu-contaniner.more-sections .class-menu-block {
  background: #fbfbfb;
  font-size: 0.187rem;
  color: #333;
}

.class-menu-block {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  font-weight: 400;
}

.class-menu-contaniner .more-sections .class-level-one {
  padding-left: 20px;
  font-size: 14px;
  min-height: auto;
}

.class-menu-contaniner .list-page-container .class-level-one {
  border-right: none;
  font-size: 16px;
  color: #333;
  padding-left: 15px;
  min-height: 62px;
  cursor: pointer;
}

.class-menu-contaniner .class-level-one {
  /* border:1px solid red; */
  font-size: 14px;
  color: #666;
  position: relative;
  width: 100%;
  /* min-height: 90px; */
  line-height: 50px;
  height: 50px;
  padding-left: 30px;
  border-right: 1px solid #ededed;
  cursor: pointer;
}

.class-level-one:hover {
  background: rgba(207, 198, 196, 0.534);
}

.class-menu-contaniner .over-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-menu-contaniner .class-level-one:first-child .text-wrap {
  border-top: none;
}

.class-menu-contaniner.list-page-container .class-level-one .text-wrap .content {
  width: 600px;
  word-break: break-all;
  white-space: normal;
  text-align: left;
  float: left;
}

.class-menu-contaniner.more-sections .class-level-one .item-status-wrap-list {
  top: 15px;
}

.class-menu-contaniner .class-level-one .item-status.lock {
  width: 20px;
  height: 20px;
  background: url() no-repeat;
  background-size: 100% 100%;
  margin-right: 14px;
  float: right;
  line-height: 20px;
  position: relative;
  top: 13px;
  right: 10px;
}

.class-menu-contaniner .class-level-one .item-status.test-watch {
  width: 46px;
  height: 20px;
  border: 1px solid rgba(0, 179, 138, 0.5);
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  color: #00b38a;
  line-height: 20px;
  position: relative;
  top: 13px;
  right: -25px;
}

.message {
  padding: 20px 20px 1.733rem;
  background: #fff;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 16px;
}

.message-edit-emoji-icon {
  width: 20px;
  height: 20px;
}

img {
  border: 0;
  vertical-align: top;
  display: inline-block;
}

.disableBg {
  background: #ccc;
}

.message-edit-btn {
  background: #00b38a;
  color: #fff;
  font-size: 14px;
  width: 107px;
  height: 40px;
  line-height: 40px;
  border: none;
  border-radius: 4px;
}

.message-edit-emojilist em {
  margin-top: -29px;
  color: #e2ebe8;
  font-style: normal;
}

.message-edit-emojilist-tip {
  display: block;
  width: 30px;
  height: 16px;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  margin-left: 15px;
}

em,
i {
  font-style: normal;
}

.emoji-icon {
  margin: 8px;
}

.emoji_1f600 {
  background: url(https://www.lgstatic.com/mds-pipline-fed/instantMessaging/common/img/emojiSprite.8c9eba9b.png) -108px -36px no-repeat;
  background-size: 216px auto;
}

[class*=" emoji_"],
[class^="emoji_"] {
  height: 18px;
  width: 18px;
  display: inline-block;
}

.message-list {
  color: #333;
  padding: 20px 0 30px;
}

.message-list-title-left,
.message-list-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.message-list-title-left {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: left;
}

.message-list-title-left-name {
  font-size: .373rem;
  margin-right: .133rem;
  font-weight: 700;
}

.message-list-title-left-tag {
  min-width: 26px;
  height: 16px;
  line-height: 16px;
  padding: 1px 5px;
  text-align: center;
  border-radius: 1px;
  font-size: 10px;
  border-radius: 2px;
  color: #fff;
}

.message-list-title-right {
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.message-list-title-right-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

img {
  border: 0;
  vertical-align: top;
  display: inline-block;
}

.message-list-title-right-praise {
  height: 10px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666;
  line-height: 13px;
}

.message-list-content {
  color: #666;
  font-size: 16px;
  margin-top: 10px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  line-height: 30px;
  text-align: left;
}

.pointer {
  cursor: pointer;
}

.message-delete {
  color: #999;
  font-size: 14px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-top: 8px;
  position: relative;
  width: 50px;
}


.message-delete-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
</style>
